<template>
  <div class="home">
    <nav-bar class="home-nav">
      <div slot="center">首页</div>
    </nav-bar>

    <home-Swiper :banners="banners"></home-Swiper>
    <home-recommend :recommends="recommends"></home-recommend>
    <home-feature></home-feature>
    <tab-control
      :titles="['标题1', '标题2', '标题3']"
      class="tab-control"
    ></tab-control>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
    <h2>1</h2>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";
import TabControl from "@/components/content/tabControl/TabControl.vue";

import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommend from "./childComps/HomeRecommend.vue";
import HomeFeature from "./childComps/HomeFeature.vue";

import { getHomeMultdata } from "@/network/home.js";
export default {
  name: "Home",
  data() {
    return {
      banners: [],
      recommends: [],
    };
  },
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    HomeFeature,
    TabControl,
  },
  created() {
    getHomeMultdata()
      .then((res) => {
        console.log(res);
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.home {
  padding-top: 44px;
}
.home-nav {
  background-color: var(--color-tint);
  color: white;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  /* 堆叠至于上层，可以是负数 */
}
.tab-control {
  position: sticky;
  top: 44px;
  background-color: white;
}
</style>
